<template>
  <el-row>
    <el-row style="height: 60px; z-index: 99;" class="p-fixed w-percent100">
      <el-alert v-if="showNote"  title="这是一个模仿简书首页的页面" type="warning"></el-alert>
      <el-col style="line-height: 60px;background-color: #fff;border-bottom: solid 1px #e6e6e6" class="text-center bold c-price" :xs="4" :sm="4" :md="4" :lg="4" :xl="4" >
        <span class="p-absolute title12" style="margin-top:18px;margin-left:16px;"> <span class="border-price">传令</span></span>
        <span class="title18">Token</span>
      </el-col>
      <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
        <el-menu active-text-color="#FE3D05" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item  v-for="(x,index) in navinfo" :key="index" :index="x.index" @click="topath(x.link)">{{x.name}}</el-menu-item>
          <el-menu-item id="search">
            <el-input  suffix-icon="el-icon-search"  clearable placeholder="搜索" v-model="txt">
            </el-input>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col style="line-height: 60px;background-color: #fff;border-bottom: solid 1px #e6e6e6" class="text-left" :xs="4" :sm="4" :md="4" :lg="4" :xl="4"><el-button class="bg-price"  round type="danger">登录/注册</el-button></el-col>
    </el-row>
    <el-row class="container" style="padding-top: 95px;margin:0 auto;">
      <!--<el-col span="16"  :style="{'max-height':slide_h+'px'}" class="overflow-y">-->
      <!--<div :style="{'min-height':slide_h+100+'px'}" >2</div>-->
      <!--</el-col>-->
      <el-col  span="16">
        <div :style="{'min-height':slide_h+500+'px'}" >
          <el-carousel class="m-b10"  arrow="never" indicator-position="none">
            <el-carousel-item>
              <el-image style="width:100%;height: 100%;" fit="fill" src="https://upload.jianshu.io/admin_banners/web_images/4894/23ecc55accf5c6a6c9910be966c125853d1f04a5.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"></el-image>
            </el-carousel-item>
            <!--<el-carousel-item>-->
            <!--<el-image style="height: 100%;width:100%"  fit="fill"  src="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"></el-image>-->
            <!--</el-carousel-item>-->
            <!--<el-carousel-item>-->
            <!--<el-image style="height: 100%;width:100%" fit="fill" src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"></el-image>-->
            <!--</el-carousel-item>-->
          </el-carousel>
          <el-row>
            <el-col style="min-height:140px;margin-bottom: 20px" class="p-relative border-b" v-for="(x,index) in news" :key="index">
              <el-image class="p-absolute" style="border-radius:4px;width:150px;height:100px;top:50%;margin-top:-50px;right:0;"  fit="fill" src="https://upload.jianshu.io/admin_banners/web_images/4894/23ecc55accf5c6a6c9910be966c125853d1f04a5.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"></el-image>
              <el-row style="padding-right:165px;">
                <div class="title18 bold" style="line-height:1.5">{{x.title}}</div>
                <div class="c-9" style="font-size: 13px;line-height: 24px;">
                  {{x.subTitle}}
                </div>
                <div class="title12 p-t5" style="color:#b4b4b4"><span class="m-r5">{{x.author}}</span><i class="el-icon-star-on m-r10">{{x.liker}}</i><i class="el-icon-s-flag  m-r10">{{x.follower}}</i></div>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col span="7" offset="1" >
        <el-row v-for="(x,index) in banners" :key="x">
          <el-col class="m-b10"><el-button   class="text-left bold title18 w-percent100" style="border-radius: 5px;border:0;padding-top:16px;padding-bottom: 25px;" :style="{'background-color':x.bgColor,'font-family':fontfamily[0].value,'color':x.color }" :type="x.type" :icon="x.icon" >{{x.name}}<div style="right: 10px;" class="p-absolute title12">{{x.descript}}</div></el-button> </el-col>
        </el-row>
        <el-row style="margin-bottom:38px;">
          <el-popover
            placement="right"
            width="220"
            trigger="hover">
            <div id="downloadApp2" class="text-center"></div>
            <div slot="reference" style="padding:10px 18px;border-radius: 4px;" class="cursor border-ea">
              <div style="width:60px;height: 60px;" class="vertical-a-m inline-block w-percent100"  id="downloadApp"></div>
              <div class="inline-block vertical-a-m" style="margin-left:7px">
                <div class="m-b5 title15 c-333">
                  下载<code>传令</code>手机App <i class="el-icon-arrow-right"/>
                </div>
                <div style="font-size: 13px" class="c-9">随时随地发布和掌握情报</div>
              </div>
            </div>
          </el-popover>
        </el-row>
        <el-row>
          <el-col class="title14" style="color:#969696">
            <div class="pull-right cursor" @click="rotatereflush()" ><i :style="{'transform':'rotate('+deg+'deg)'}" style="transition: .5s" class="el-icon-refresh"/>换一批</div>
            <div class="overflow" >快马飞报</div>
          </el-col>
          <el-col span="24" v-for="(x,index) in orders" :key="index" style="margin-top:20px" class=" overflow">
            <div class="pull-left">
              <!--<el-avatar class="cursor"  style="border-radius:50%;width:48px;height:48px;ling-height:48px" >令</el-avatar>-->
              <el-avatar :style="{'background-color':initAlias(x.type,colors)}" class=" title24">令</el-avatar>
            </div>
            <div onclick="alert(1)" class="p-absolute cursor title14 c-price" style="right:0">{{proUtil.Money(x.rewardNumber)}}/<span class="title12">次</span></div>
            <div class="overflow cursor" style="padding: 0 10px 0 10px">
              <div class="title14 c-333 bold" :style="{'color':initAlias(x.type,colors)}">{{x.name}}</div>
              <div class="title12  p-t5 breakAll">任务：{{x.content}}</div>
              <div class="title12  p-t5 breakAll">前置条件：{{x.askBefore}}</div>
            </div>
          </el-col>
          <el-col>
            <div class="p-tb15"></div>
            <el-button  class="w-percent100" style="border:0" type="info" plain>查看全部 <i class="el-icon-arrow-right"/></el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
      <el-backtop>Top</el-backtop>
  </el-row>
</template>
<script type="es6">
  export default {
    name: "author",
    data(){
      return {
        showNote:true,
        deg:0,
        txt:"",
        fontfamily:[{"name":'宋体',"value":"Georgia,Times New Roman,Times,Songti SC,serif"},{"name":"黑体","value":"-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif"}],
        slide_h:window.document.body.offsetHeight-65,
        activeIndex:"",
        navinfo:[
          {name:"首页",index:0,link:'/home',icon:''},
          {name:"下载App",index:1,link:'',icon:''},
          {name:"介绍",index:2,link:'',icon:''},
          // {name:"注册",index:3,link:'',icon:''},
          {name:"写文章",index:4,link:'',icon:''},
        ],
        colors:[
          {opt:1,alias:'#B7D6EC'},
          {opt:2,alias:'#FE3D05'},
          {opt:3,alias:'#FFB84F'}
        ],
        banners:[
          {type:"primary",name:"江湖令牌",link:'',icon:"",bgColor:"#FE3D05",descript:"重赏之下必有勇夫"},
          {type:"primary",name:"风云人物",link:'',icon:"",bgColor:"#B7D6EC",descript:"天下英雄出我辈",color:"#4B88A9"},
          {type:"primary",name:"客栈闲聊",link:'',icon:"",bgColor:"#C1E4DE",descript:"与尔同销万古愁",color:"#549087"},
          {type:"primary",name:"平生夙愿",link:'',icon:"",bgColor:"#F4E0BD",descript:"唯有求不得",color:"#BF913C"},
          {type:"primary",name:"豪杰招募",link:'',icon:"",bgColor:"#FFB84F",descript:"三千越甲可吞吴",color:"#111111"},
        ],
        orders:[
          {type:1,name:"推广令",userName:"飞花城主",rewardNumber:0.01,headImage:"http://img.08087.cc/uploads/20191128/14/1574920984-UpbVsfqwxd.jpg",askBefore:"任何人都可以接取该任务",content:"传令网正式上线了"},
          {type:2,name:"悬赏令",userName:"白云城主",rewardNumber:0.05,headImage:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583853148311&di=add3cf5ece1f3e5a5a484ee937cb8fa8&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F03%2F24%2Fff37ebddd34f4c9f1f9969773fddeabd.jpg",askBefore:"只能传递给人脉价值在500分以上的好友",content:"寻找年产量在1000W吨的加工企业"},
          {type:3,name:"招募令",userName:"清水寨二当家",rewardNumber:0.02,headImage:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583853232627&di=b651a95aa54f9ee5927371ab16e85f51&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F03%2F24%2F9a3338eba63572a6712adfd3d6cba248.jpg",askBefore:"只能传递给相同兴趣的好友",content:"招人领养5只竹鼠"},
          {type:1,name:"推广令",userName:"梅花山庄",rewardNumber:0.01,headImage:"http://img.08087.cc/uploads/20191128/14/1574920984-UpbVsfqwxd.jpg",askBefore:"任何人都可以接取该任务",content:"传令网首次月度风云人物发布"},
          {type:2,name:"悬赏令",userName:"黑风会",rewardNumber:0.05,headImage:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583853148311&di=add3cf5ece1f3e5a5a484ee937cb8fa8&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F03%2F24%2Fff37ebddd34f4c9f1f9969773fddeabd.jpg",askBefore:"任何人都可以接取该任务",content:"需要50箱面膜"},
          {type:2,name:"悬赏令",userName:"普陀山庄",rewardNumber:0.06,headImage:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583853148311&di=add3cf5ece1f3e5a5a484ee937cb8fa8&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F03%2F24%2Fff37ebddd34f4c9f1f9969773fddeabd.jpg",askBefore:"任何人都可以接取该任务",content:"需要2-5人开发团队"}
        ],
        news:[
          {id:1,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:2,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:3,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:4,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:5,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:6,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:6,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:6,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:6,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:6,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:6,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:6,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:6,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:6,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:6,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:6,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
          {id:6,title:"用你喜欢的方式过一生",subTitle:'文 | 卧猫 莎士比亚说，“有些人只拥吻影子，于是只拥有幸福的幻影。” 这话听起来似乎有点批评的意思，好像在指责一些人没有真切地活在现实生活里。...',createTime:'2019-03-01',author:"卧猫G",follower:113,liker:663},
        ]
      }
    },
    mounted(){
      document.body.style.fontFamily=this.fontfamily[1].value
      this.proUtil.createQrCode("downloadApp","//gitee.com/sky_cj/blog/","60","60");
      this.proUtil.createQrCode("downloadApp2","//gitee.com/sky_cj/blog/","220","220");
    },
    created(){
      setTimeout(()=>{
        this.showNote=false;
      },3000)
    },
    methods:{
      rotatereflush(){
        this.deg+=360;
      },
      initAlias(opt,arr){
        for(var i =0;i<arr.length;i++){
          if(arr[i].opt==opt){
            return arr[i].alias;
          }
        }
      },
      topath(path){
        this.$router.push(path);
      }
    }
  }
</script>
<style scoped  lang="scss">
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  @media (min-width: 992px) {
    .container {
      width:960px;
      .el-carousel__item{
        height:270px;
        border-radius:8px;
      }
    }
  }

  @media ( max-width: 1080px) {
    .container {
      width:750px;
      .el-carousel__item{
        height:210px;
        border-radius:8px;
      }
      /deep/ .el-carousel__container{
        height:230px;
      }
    }
    /deep/ #search{
      display:none;
    }
  }


  /deep/ #search input{
    border-radius: 30px!important;
    background-color: #eee;
    border-color:#eee;
    transition: .12s;
  }
  /deep/ #search input:focus{
    width:260px;
    transition: .12s;
  }
  .el-backtop{
    width:56px;
    height:56px;
  }
  .el-backtop ,.el-calendar-table td.is-today {
    color: #FE3D05;
  }
</style>
